#include("../common/_layout.html")
#include("../common/_navbar.html")
#@layout()

#define content()
	#@navbar("summon")
	<div class="container">
		<h1>#(pool.name ??)</h1>
		<button class="btn btn-primary" id="drawOne">召唤　1　次</button>
		<button class="btn btn-primary" id="drawTen">召唤　10　次</button>
		<div class="card-deck-wrapper" id="result">
			<div class="card-deck">
                <div class="col-sm-3" v-for="card in cards">
					<div class="card" v-bind:class="[card.rareColorClass]">
	                    <img class="card-img-top" src="#(homeurl ??)/img/temp200x150.png">
	                    <div class="card-block">
							<h4 class="card-title">{{ card.name }}</h4>
							<p class="card-text" v-if="card.type == 'servent'">{{ card.typeName }}</p>
						</div>
						<div class="card-footer">
	                        <p class="starColor">{{ card.rareSHOW }}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		var poolId = #(pool.id ??);
		var app = new Vue({
		  el: '#result',
		  data: {
			  cards:[]
		  }
		});
		function generateCard(card) {
			var result = {};
			var cardInfo = getCardInfo(card.type, card.id);
			result.rareColorClass = 'rareColor'+cardInfo.rare;
			result.name = cardInfo.name;
			result.type = card.type;
			if("servent"==card.type){
				result.typeName = DATA_DB["class"][cardInfo.type];
			}
			result.rareSHOW = rareSHOW[cardInfo.rare];
			return result;
		}
		function getCardInfo(type,id){
			return DATA_DB[type][id];
		}
		var rareSHOW={"1":"★","2":"★★","3":"★★★","4":"★★★★","5":"★★★★★"};
		$("#drawOne").click(function(e){
			$.post("#(homeurl ??)/summon/drawOne",{"poolId":poolId},function(data){
				if(data.isFail){
					alert(data.msg);
					return;
				}
				updateUserStone();
				app.cards = [];
				var card = generateCard(data);
				app.cards.push(card);
			});
		});
		$("#drawTen").click(function(e){
			$.post("#(homeurl ??)/summon/drawTen",{"poolId":poolId},function(data){
				if(data.isFail){
					alert(data.msg);
					return;
				}
				updateUserStone();
				app.cards = [];
				for(var i=0;i<data.length;i++){
					var card = generateCard(data[i]);
					app.cards.push(card);
				}
			});
		});
	</script>
	<script src="#(homeurl ??)/js/db.js"></script>
#end

#define css()
<style type="text/css">
    #result .card {
        margin-top: 5px;
    }
</style>
#end